<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
input::placeholder:hover {
    color: blue;
}
input::placeholder {
    color: green;
}
input::-webkit-input-placeholder {
    background: red;
}
</style>
<script>
test(t => {
  // There are three rules in the style element.  But the first one should be
  // dropped.
  assert_equals(document.styleSheets[0].rules.length, 2);
}, '::placeholder with a user-action selector should be an error.');

test(t => {
  assert_equals(document.styleSheets[0].rules[0].selectorText, 'input::placeholder');
}, 'Serialization for ::placeholder should be ::placeholder.');

test(t => {
  // Compatibility with Safari and Firefox.
  assert_equals(document.styleSheets[0].rules[1].selectorText, 'input::-webkit-input-placeholder');
}, 'Serialization for ::-webkit-input-placeholder should be ::-webkit-input-placeholder.');
</script>
